<template>
  <div class="chart-detail">
    <div class="" style="height:70px;" v-show="canShow"></div>
    <!-- 头部显示 -->
    <div class="detail-top">
      <div class="top-left">
        缴费趋势分析
      </div>
      <div class="top-right" @click="goBack">
        返回
      </div>
    </div>
    <!-- 详情 -->
    <div class="detail-box" :style="{height:height+'px'}">
      <!-- 详情头部 -->
      <h3 class="chart-title">
        <div class="area-title-name" @mouseenter="mouseenter()"
             @mouseleave="mouseleave()">{{ areaTitle }} &nbsp; | &nbsp; {{this.insuredName}}保险 &nbsp; | &nbsp;
          {{title}}年
        </div>
        <div class="tip" v-show="isShowHelp">
          <el-tooltip effect="dark" :content="helpMessage" placement="left">
            <i class="icon-help-describe" style="font-size: 20px"></i>
          </el-tooltip>
        </div>
      </h3>
      <div class="chart-title-floating" v-show="showFloating">
        <span>统筹区: {{ this.areaName }}</span><br>
        <span>险种: {{ this.insuredName }}</span><br>
        <span>年份: {{ title }}</span>
      </div>
      <div :style="{height:height - 96 +'px'}" class="container">
        <div id="payment-number-analysis-detail" class="detail-content"></div>
        <Summarize :showSummarizeText="conclusion"></Summarize>
      </div>

    </div>
  </div>
</template>
<script>

  import '../../assets/css/chartDetail.css'
  import {loadingOpt} from '../../assets/js/utils.js'
  import Summarize from '../last/summarize/summarize'
  import {getPayNumberDetailAnalysis} from '../../api/api'


  export default {
    props: ['isChange'],
    data () {
      return {
        title: '',
        areaTitle: '',
        isShowChart: true,
        height: 800,
        canShow: true,
        showFloating: false,
        propParams: {},
        areaName: '',
        insuredName: '',
        conclusion: '',
        isShowHelp: false,
        helpMessage: ''
      }
    },
    components: {
      Summarize
    },
    mounted () {
      this.initData();
      this.getContentH();
      setTimeout(() => {
        this.initMyChart();
      }, 101)
    },
    watch: {
      isChange () {
        this.getContentH();
      },
    },
    methods: {
      // 初始化数据
      initData () {
        this.propParams = this.$route.query;
        this.title = this.propParams.year;
        this.areaTitle = this.filterLogText(this.propParams.areaName);
        this.areaName = this.propParams.areaName;
        this.insuredName = this.propParams.insuredName;
      },
      // 初始化Chart
      initMyChart () {
        this.myChart = this.$echarts.init(document.getElementById('payment-number-analysis-detail'));
        this.getData();
      },
      // 发送请求
      getData () {
        this.myChart.showLoading(loadingOpt);

        getPayNumberDetailAnalysis('person/payNumberDetailAnalysis', this.propParams.year,
          this.propParams.areaCode, this.propParams.insuredCode)
          .then(response => {
            let json = response.data;
            if (response.code == 0) {
              this.myChart.hideLoading();

              this.helpMessage = json.tips;
              this.isShowHelp = this.helpMessage && this.helpMessage.length > 0;
              this.conclusion = json.reportConclusion;
              this.drawLine(json);
            } else {
              this.myChart.showLoading(loadingOpt)
              this.isShowChart = false;
            }
          }).catch(res => {
          this.isShowChart = false;
        })
      },

      // 设置高度
      getContentH () {
        setTimeout(() => {
          let height = document.documentElement.clientHeight;
          let barHeight = 0;
          if (document.querySelector('.el-header')) {
            this.canShow = true;
            barHeight = document.querySelector('.el-header').clientHeight;
          } else {
            this.canShow = false;
          }
          this.height = height - barHeight - 96;
        }, 100);
        if (this.myChart) {
          setTimeout(() => {
            this.myChart.resize();
          }, 301)
        }
      },
      goBack () {
        this.$router.push(this.propParams.hash.slice(1,this.propParams.hash.length))
        sessionStorage.setItem ('isPrev',0)
      },
      // 字数太长省略
      filterLogText (value, leng = 7) {
        if (!value) {
          return value;
        }
        if (value.length <= leng) {
          return value;
        } else {
          return value.slice(0, leng) + '...';
        }
      },
      drawLine (json) {

        let lineFormatter = function (params) {
          return `<span style="color:#fff">增长率(环比)</span></br>
                          <span style="color:#fff"">统计时间: ${params.name}</span></br>
                          <span style="color:#fff">${params.seriesName}: ${params.value}%</span>`
        };
        let barFormatter = function (params) {

          let num = params[0].data;
          if (num > 10000) {
            num = Number((num / 10000).toFixed(2)) + '万人';
          } else {
            num = num + '人';
          }

          let subNum = params[1].data;
          if (subNum > 10000) {
            subNum = Number((subNum / 10000).toFixed(2)) + '万人';
          } else {
            subNum = subNum + '人';
          }

          let difference = params[2].data;
          if (difference > 10000) {
            difference = Number((difference / 10000).toFixed(2)) + '万人';
          } else {
            difference = difference + '人';
          }

          num = num.indexOf('null') != -1 ? '' : num;
          subNum = subNum.indexOf('null') != -1 ? '' : subNum;
          difference = difference.indexOf('null') != -1 ? '' : difference;

          return `<span style="color:#fff">参保人缴费情况</span></br>
                          <span style="color:#fff"">统计时间: ${params[0].name}</span></br>
                          <span style="color:#fff">参保人数: ${num}</span></br>
                          <span style="color:#fff">缴费人数: ${subNum}</span></br>
                          <span style="color:#fff">缴费人数与参保人数的差值: ${difference}</span>`
        };
        let option = {
          grid: [//此参数可在一个dom中划分多个图表 可设置不同图表的位置
            {
              top: '10%',
              height: '10%',
              tooltip: {
                formatter: "{b}</br>{c}%" //给当前坐标系添加弹窗
              }
            },
            {
              top: '36%',
              height: '36%',
              tooltip: {
                show: true,
                trigger: 'axis',
                axisPointer: {
                  type: 'shadow'
                },
              }
            }
          ],
          legend: [
            {
              left: 'center',
              icon: 'circle',
              itemWidth: 10,
              itemHeight: 10,
              itemGap: 20,
              tooltip: {
                show: false,
              },
              data: ['参保人数增长率', '缴费人数增长率'],
              textStyle: {
                color: '#fff'
              },
            },
            {
              top: '80%',
              left: 'center',
              icon: 'rect',
              itemWidth: 10,
              itemHeight: 10,
              itemGap: 20,
              selectedMode: false,
              data: ['参保人数', '缴费人数',
                {
                  name: '缴费人数与参保人数差值',
                  icon: 'circle',
                }
              ],
              textStyle: {
                color: '#fff'
              },
            }],
          tooltip: {
            show: true,
            textStyle: {
              fontSize: 12
            },
            formatter: barFormatter
          },
          xAxis: [
            {
              data: json.ymList,
              show: true,
              axisLine: {
                show: true, // 显示x轴坐标线并设置为虚线
                lineStyle: {
                  color: '#294363'
                }
              },
              axisTick: {
                show: false // 不显示x轴坐标的刻度
              },
              axisLabel: {
                show: false // 不显示x轴坐标数值
              }
            },
            {
              data: json.ymList,
              gridIndex: 1,
              axisLine: { // x轴的横线是否显示
                show: true,
                lineStyle: {
                  color: '#2a4565'
                }
              },
              axisTick: { // x轴的刻度短竖线是否显示
                show: false
              },
              axisLabel: {
                formatter: '{value}',
                textStyle: {
                  color: '#fff'
                }
              },
            }
          ],
          yAxis: [
            {
              splitLine: {
                show: false,
              },
              position: 'right',
              splitNumber: 2,
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                formatter: '{value}',
                textStyle: {
                  color: '#fff'
                }
              },
            },
            {
              name: '单位 : 万人',
              nameTextStyle: {
                color: '#fff'
              },
              splitLine: {
                show: false,
              },
              gridIndex: 1,
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#2a4565',
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                formatter: function (params) {
                  return params / 10000;
                },
                textStyle: {
                  color: '#fff'
                }
              },
            },
            {
              name: '差值 : 人',
              position: 'right',
              nameTextStyle: {
                color: '#fff'
              },
              splitLine: {
                show: false,
              },
              gridIndex: 1,
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#2a4565',
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                formatter: '{value}',
                textStyle: {
                  color: '#fff'
                }
              },
            },

          ],
          series: [ // 折线
            {
              type: 'line',
              color: '#129cff',
              symbol: 'circle',
              showSymbol: true,
              name: '参保人数增长率',
              data: json.insuredNumRateList,
              symbolSize: 10,
              tooltip: {
                show: true,
                formatter: lineFormatter,
              },
              label: {
                show: false,
              }
            },
            {
              type: 'line',
              color: '#67ffdb',
              symbol: 'circle',
              showSymbol: true,
              name: '缴费人数增长率',
              data: json.payNumRateList,
              symbolSize: 10,
              tooltip: {
                show: true,
                formatter: lineFormatter
              },
              label: {
                show: false,
              }
            },
            {
              type: 'bar',
              name: '参保人数',
              data: json.insuredNumList,
              color: '#ff6a93',
              barWidth: '30%',
              xAxisIndex: 1,
              yAxisIndex: 1,
              tooltip: {
                show: true,
                formatter: barFormatter
              },
              label: {
                show: false,
              },
            },
            {
              type: 'bar',
              name: '缴费人数',
              data: json.payNumList,
              color: '#ffd66a',
              barWidth: '30%',
              xAxisIndex: 1,
              yAxisIndex: 1,
              tooltip: {
                show: true,
                formatter: barFormatter
              },
              label: {
                show: false,
              },
            },
            {
              type: 'line',
              color: '#da67ff',
              symbol: 'circle',
              showSymbol: true,
              xAxisIndex: 1,
              yAxisIndex: 2,
              name: '缴费人数与参保人数差值',
              data: json.difNumList,
              symbolSize: 10,
              tooltip: {
                show: true,
                formatter: lineFormatter
              },
              label: {
                show: false,
              }
            },
          ],
        };

        this.myChart.setOption(option);
      },
      mouseenter () {
        this.showFloating = true;
      },
      mouseleave () {
        this.showFloating = false;
      },
    }
  }
</script>
<style scoped>
  .container {
    width: 100%;
    height: 100%;
    background: #1B2B44;
    color: #ffffff;
    position: relative;
  }

  .tip {
    font-size: 14px;
    color: white;
    float: right;
    right: 8%;
    position: relative;
    top: 72%;
    z-index: 2;
  }
</style>
